/**
 * @fileoverview 水印
 * @author 带只拖鞋去流浪
 * @description water-mark/index.jsx
 */
import _ from 'lodash';
import { defineComponent, ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { WaterMark } from '@/../packages';
import styles from './index.module.less';

export default defineComponent({
    setup(props, { slots }) {

        const state = reactive({
            /**
             * @description 水印字体颜色 style
             * @type { string }
             */
            color: '#f00',
            /**
             * @description 延时器数组
             * @type { array }
             */
            timers: [],
        });


        /**
         * @description 生命周期
         * @description 挂载后
         */
        onMounted(() => {
            /**
             * @description 获取一个 0~255 的随机数字
             * @returns { number }
             */
            const getColorValue = () => parseInt(Math.random() * 255);

            for (let i = 1; i < 100; i++) {
                (() => {
                    const timer = setTimeout(() => {
                        // state.color = `rgb(${getColorValue()},${getColorValue()},${getColorValue()})`;
                        state.color = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
                    }, 500 * i);

                    state.timers.push(timer);
                })();
            }
        });


        /**
         * @description 生命周期
         * @description 销毁前
         */
        onBeforeUnmount(() => {
            _.forEach(state.timers, timer => clearTimeout(timer));
        });


        return () => (<div
            class={[styles['water-mark']]}
        >
            <WaterMark fixed={false}>
                <div style={{
                    transform: `rotate(45deg)`,
                    'font-size': `1rem`,
                    height: `17rem`,
                    width: `17rem`,
                    display: `flex`,
                    justifyContent: `center`,
                    alignItems: `center`,
                    color: state.color,
                    backgroundSize: `auto 100%`,
                    backgroundRepeat: `no-repeat`,
                }}>
                    张三说他来了
                </div>
            </WaterMark>
        </div>)
    }
})